<template>
  <text class="roc-icon fa" :class="classOptions" :style="styleOptions"></text>
</template>

<script>
/**
 * roc-icon
 * @description 本组件提供 fontawesome4.7.0 图标
 * @doc https://rocyuan666.gitee.io/uniapp/roc-icon.html
 *
 * @property {String}           name             名字fa-xxx，去掉fa-，只传 xxx
 * @property {Number | String}  size             大小 单位px （默认 16）
 * @property {String}           color            颜色 （默认 #606266）
 * @property {Number | String}  rotate           旋转，仅支持 90 180 270
 * @property {Boolean}          animationType    动画类型 - spin(平滑旋转) pulse(非平滑旋转)
 */
export default {
  name: 'roc-icon',
  data() {
    return {
      classOptions: {
        [`fa-${this.name}`]: true,
        [`fa-rotate-${this.rotate}`]: this.rotate ? true : false,
        [`fa-${this.animationType}`]: this.animationType ? true : false,
      },
      styleOptions: {
        fontSize: String(this.size).includes('px') ? this.size : `${this.size}px`,
        color: this.color,
      },
    }
  },
  props: {
    name: {
      type: String,
      default: '',
      required: true,
    },
    size: {
      type: [Number, String],
      default: 16,
    },
    color: {
      type: String,
      default: '#606266',
    },
    rotate: {
      type: [Number, String],
      default: 0,
    },
    animationType: {
      type: String,
      default: '',
    },
  },
}
</script>

<style lang="scss" scoped>
$fa-font-path: 'styles/fonts';
@import 'styles/scss/font-awesome.scss';
</style>
